<template>
  <div>
    <a-card class="w-full">
      <div class="text-[16px] px-4 flex justify-between items-center">
        <span>{{ t["选择商品"] }}</span>
        <div class="flex">
          <a-select v-model="goodsQuery.category" style="width: 100px" :options="categoryList">
          </a-select>
          <a-input-search
            v-model="goodsQuery.goodsName"
            style="width: 200px"
            @search="search"
            @keydown.enter="search"
          ></a-input-search>
        </div>
      </div>
    </a-card>

    <a-divider class="my-8" />
    <a-card :bordered="false">
      <a-table
        v-model:selected-keys="productKeys"
        :row-selection="{
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false
        }"
        :columns="translateColumns(goodColumns)"
        :data="goodsList"
        row-key="goodsId"
        :pagination="{
          total: goodsQuery.total,
          current: goodsQuery.pageNum,
          pageSize: goodsQuery.pageSize
        }"
        @page-size-change="pageChange"
        @page-change="pageChange"
      >
        <template #actions>
          <a-button>
            <IconCheck />
          </a-button>
        </template>
      </a-table>
    </a-card>

    <div class="flex justify-between mt-3">
      <a-button status="danger" @click="setStep(1)">{{ t["上一步"] }}</a-button>
      <a-button type="primary" @click="nexStep">{{ t["下一步"] }}</a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { listCategory } from "@/api/service/goods/category";
import { listGoods } from "@/api/service/goods/goods";
import { templateQuery } from "@/api/service/template/template";

import { SelectOptionData } from "@arco-design/web-vue";
import { goodColumns } from "../columns";
import { form, goodsList, productKeys } from "../index";
import { setStep } from "../step";
import { statisticsList, templateList } from "../template/data";

const categoryList = ref<SelectOptionData[]>([]);
const t = translate("公共模块");
const query = {
  total: 0,
  pageNum: 1,
  pageSize: 15,
  goodsName: "",
  queryType: 0,
  category: ""
};
const goodsQuery = ref({
  ...query
});

const getCategory = async () => {
  if (categoryList.value.length === 0) {
    const data = await listCategory({
      orderByColumn: "create_time",
      isAsc: "desc",
      total: 0,
      pageNum: 1,
      pageSize: 10
    });
    categoryList.value = data.rows.map((e: any) => {
      return {
        label: e.categoryName,
        value: e.categoryName
      };
    });
  }
};

const getTemplateList = async () => {
  templateList.value = [];
  statisticsList.value = [];
  const result = await templateQuery(0);
  templateList.value = result.data;

  result.data.forEach((e) => {
    if (e.options) {
      statisticsList.value.push({
        desc: e.desc,
        resolutionId: e.resolutionId,
        count: 0
      });
    }
  });
};
onMounted(() => {
  getTemplateList();
  getCategory();
});
/* to next step */
const nexStep = () => {
  statisticsList.value.forEach((e) => {
    e.count = 0;
  });
  goodsList.value.forEach((e) => {
    if (!e.tagCount) return;
    if (productKeys.value.includes(e.goodsId)) {
      e.tagCount.forEach((m) => {
        statisticsList.value.forEach((v) => {
          if (v.resolutionId === m.resolutionId) {
            v.count += m.count;
          }
        });
      });
    }
  });
  setStep(3);
  // statistics
};
const getGoods = () => {
  listGoods(goodsQuery.value).then((res) => {
    goodsList.value = res.rows;
    goodsQuery.value.total = res.total;
  });
};
const pageChange = (index: number) => {
  goodsQuery.value.pageNum = index;
  getGoods();
};
onMounted(() => {
  getGoods();
});
watch(form, () => {
  goodsQuery.value = {
    ...query
  };
  getGoods();
});

const search = () => {
  goodsQuery.value.pageNum = 1;
  getGoods();
};
</script>

<style lang="scss" scoped></style>
